<template>
    <div>
        <h1>{{ getName }}</h1>
        Clicked: {{ getCount }} times
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
    </div>
</template>
<script>
import {
    mapGetters
} from 'vuex'
import {
    mapActions
} from 'vuex'

export default {
    computed: {
        // 使用对象展开运算符将 getters 混入 computed 对象中
        ...mapGetters({
				getCount: 'todos/getCount',
          getName: 'todos/getName'
				// ...
		    	})
    },
    methods: {
//        ...mapActions({
//				increment:	'todos/increment', // 映射 this.increment() 为 this.$store.dispatch('increment')
//				decrement:'todos/decrement'
//			}),
			increment (){
        this.$store.commit('todos/UPDATENAME', "vuex 测试 +++")
				this.$store.dispatch('todos/INCREMENT', {i:10})
			},
			decrement () {
        this.$store.commit('todos/UPDATENAME', "vuex 测试 ---")
				this.$store.dispatch('todos/DECREMENT', {i:10})
			}

        //...mapActions({
        //  add: 'increment' // 映射 this.add() 为 this.$store.dispatch('increment')
        //})
    }
}
</script>
